import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import './expert.css';
import Page11 from "./echarts/page11";
import { HomeOutlined } from '@ant-design/icons';
import Pie3 from "./echarts/pie3";
import Pie4 from "./echarts/pie4";
import { Layout, Breadcrumb, Card } from 'antd';
import axios from "axios";

const { Header } = Layout;

class Expert extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            museums: ['故宫博物院','河北博物馆','安徽博物馆','上海博物馆','西安博物馆',''],
            museum: '故宫博物院',
            density: ["史前","夏","商","周","春秋·战国","秦汉","三国·晋·南北朝","隋·唐","五代十国","宋","金","元","明","清"],
            types: ['博物馆','朝代'],
            type: '博物馆',
            charts: ['柱状图','饼图'],
            chart: '柱状图',
            contexts: ['词频统计','分布统计'],
            context: '词频统计',
            mustim_data: [],
            dentim_data: [],
            muswhe_data: [5994,38,1768,736,33,0],
            denwhe_data: [3,1,0,0,2,731,512,601,56,1530,420,253,1442,3018],
            data: [0,1,2],
            data2: [[0,1,2],[1,2,3]]
        };
    }
    componentDidMount() {
        console.log(this.state.chart);
        console.log(this.state.museum);
        axios({
            //请求类型
            method: 'post',
            //URL
            url:'http://localhost:5000/export',
            //设置请求体(即传输的数据)
            data:{
                // dynasty: this.state.checkbox_time,
                // museum: this.state.checkbox_museum,
                // name: keywords
            }
        })
        .then(response => {
            console.log(response.data)
            console.log(response.data[0])
            console.log(response.data[1])
            var temp1=JSON.parse(response.data[0])
            var temp2=[]
            console.log(temp1)
            for(var key in temp1){
                //console.log("key: " + key + " ,value: " + temp1[key]);
                temp2.push(temp1[key])
            }
            console.log(temp2)
            this.setState({mustim_data: temp2})

            temp1=JSON.parse(response.data[1])
            temp2=[]
            //console.log(temp1)
            for(var k in temp1){
                console.log("key: " + k + " ,value: " + temp1[k]);
                temp2.push(temp1[k])
            }
            console.log(temp2)
            this.setState({dentim_data: temp2})
            // for (var i=0;i<response.data[0].length;i++){
            //     temp1.push(response.data[0][i])
            // }
            // for (var i=0;i<response.data[1].length;i++){
            //     temp2.push(response.data[1][i])
            // }
            // this.setState({mustim_data:temp1[0],dentim_data:temp2[1]})
            console.log(this.state.mustim_data)
            console.log(this.state.dentim_data)
            // var temp = []
            // for(var i=0;i<response.data.hits.hits.length;i++){
            //     var obj = {}
            //     obj['name'] = response.data.hits.hits[i]._source.name
            //     obj['dynasty'] = response.data.hits.hits[i]._source.dynasty
            //     obj['museum'] = response.data.hits.hits[i]._source.museum
            //     obj['info'] = response.data.hits.hits[i]._source.description
            //     obj['url'] = response.data.hits.hits[i]._source.URL
            //     temp.push(obj)
            // }
            // this.setState({dataSource: temp})
        }).catch(err=>{
            alert('查询失败，请检查网络')
        })
    }

    getContext = (e) => {
        console.log(e.target.value);
        this.setState({context: e.target.value});
    }

    getType = (e) => {
        console.log(e.target.value);
        this.setState({type: e.target.value});
    }

    getChart = (e) => {
        console.log(e.target.value);
        this.setState({chart: e.target.value});
    }

    render(){
        var graph = null;
        console.log(this.state.mustim_data)
        if(this.state.chart==='柱状图' && this.state.type==='博物馆' && this.state.context==='词频统计'){
            graph = <Page11 key={'11'} mykeys={this.state.museums} type='bar' data={this.state.mustim_data} ttype={'博物馆'} context={'词频统计'}/>;
        }
        else if(this.state.chart==='饼图' && this.state.type==='博物馆' && this.state.context==='词频统计'){
            graph = <Pie3 key={'12'} data={this.state.mustim_data} museum={'故宫博物院'} context={'词频统计'}/>;
        }
        else if(this.state.chart==='柱状图' && this.state.type==='博物馆' && this.state.context==='分布统计'){
            graph = <Page11 key={'21'} mykeys={this.state.museums} type='bar' data={this.state.muswhe_data} ttype={'博物馆'} context={'分布统计'}/>;
        }
        else if(this.state.chart==='饼图' && this.state.type==='博物馆' && this.state.context==='分布统计'){
            graph = <Pie3 key={'22'} data={this.state.muswhe_data} museum={'河北博物馆'} context={'分布统计'}/>;
        }
        else if(this.state.chart==='柱状图' && this.state.type==='朝代' && this.state.context==='词频统计'){
            graph = <Page11 key={'31'} mykeys={this.state.density} type='bar' data={this.state.dentim_data} ttype={'朝代'} context={'词频统计'}/>;
        }
        else if(this.state.chart==='饼图' && this.state.type==='朝代' && this.state.context==='词频统计'){
            graph = <Pie4 key={'32'} data={this.state.dentim_data} museum={'安徽博物馆'} context={'词频统计'}/>;
        }
        else if(this.state.chart==='柱状图' && this.state.type==='朝代' && this.state.context==='分布统计'){
            graph = <Page11 key={'41'} mykeys={this.state.density} type='bar' data={this.state.denwhe_data} ttype={'朝代'} context={'分布统计'}/>;
        }
        else if(this.state.chart==='饼图' && this.state.type==='朝代' && this.state.context==='分布统计'){
            graph = <Pie4 key={'42'} data={this.state.denwhe_data} museum={'上海博物馆'} context={'分布统计'}/>;
        }

        return(
            <Layout>
                <div className='head'></div>
                <Header className='myheader_expert'>
                    <Breadcrumb className='bread'>
                        <Breadcrumb.Item><HomeOutlined style={{
                            width: '20px',
                            height: '40px'
                        }}/><a href='/primary_search/primary'>主页</a></Breadcrumb.Item>
                        <Breadcrumb.Item><a href='/expert'>数据可视化</a></Breadcrumb.Item>
                    </Breadcrumb>
                </Header>
                <div style={{
                    height: '100vh'
                }}>
                    <div className='mytype'>
                        <div className='type1'>
                            <p className="type">图表类型</p>
                            <select onChange={(e)=>{this.getChart(e)}} value={this.state.chart} style={{
                                marginLeft: '5vw',
                                maeginTop: '3vh',
                                fontFamily: "微软雅黑",
                                fontSize: '20px'
                            }}>
                            {
                                this.state.charts.map((ele,index)=>{
                                    return <option key={index}>{ele}</option>
                                })
                            }
                            </select>
                        </div>
                        <div className='type2'>
                            <p className="type" style={{
                                marginLeft: '20px'
                            }}>类型</p>
                            <select onChange={(e)=>{this.getType(e)}} value={this.state.type} style={{
                                marginLeft: '5vw',
                                fontFamily: "微软雅黑",
                                fontSize: '20px'
                            }}>
                                {
                                    this.state.types.map((ele,index)=>{
                                        return <option key={index}>{ele}</option>
                                    })
                                }
                            </select>
                        </div>
                        <div className='type2'>
                            <p className="type" style={{
                                marginLeft: '20px'
                            }}>分布</p>
                            <select onChange={(e)=>{this.getContext(e)}} value={this.state.context} style={{
                                marginLeft: '5vw',
                                fontFamily: "微软雅黑",
                                fontSize: '20px'
                            }}>
                                {
                                    this.state.contexts.map((ele,index)=>{
                                        return <option key={index}>{ele}</option>
                                    })
                                }
                            </select>
                        </div>
                    </div>
                    <div>
                        <Card className='mycard'>
                            {graph}
                        </Card>
                    </div>
                </div>
                <div className='foot'></div>
            </Layout>
        )
    }
}
export default Expert;